<template>
  <FullPageModal
    v-model:visible="innerVisible"
    custom-footer
    :title="t('aiot.serviceOrder.applyDetails')"
    :get-container="getContainer"
    @open="open"
  >
    <div class="w-full">
      <div class="head-info flex flex-col items-center">
        <div
          class="state-info flex flex-row items-center h-16 mb-6 w-full"
          :style="{ background: stateColor, borderColor: stateColor }"
        >
          <p class="text-color-secondary pl-4">{{ t("aiot.serviceApply.progressStatus") }}</p>
          <Icon :type="iconStr.icon" class="text-2xl pl-8" :style="{ color: iconStr.color }" />
          <p class="text-color-main font-semibold pl-1">{{ serviceInfo.serviceStateName }}</p>
          <span v-if="serviceInfo.serviceFlowNode" class="pl-4">{{ serviceInfo.serviceFlowNode }}</span>
        </div>
        <!-- <div class="state-step w-5/6">
          <a-steps :current="currentStep" :initial="0">
            <a-step v-for="item in stepArr" :key="item.serviceFlowNodeState" :title="item.serviceFlowNodeStateName" />
          </a-steps>
        </div> -->
      </div>
      <div class="flex flex-row">
        <ServiceApply v-model:loading="loadingFlag" :service-info="serviceInfo" />
      </div>
    </div>
    <template #footer>
      <div v-if="showBtn">
        <PermissionBtn
          v-if="serviceInfo.serviceState === 'WAITING'"
          :oper-type="OperPermissionType.MANAGE"
          @click="emits('cancelFn', serviceInfo)"
          >{{ t("common.cancel") }}</PermissionBtn
        >
        <PermissionBtn
          v-if="serviceInfo.serviceState === 'WAITING'"
          :btn-props="{ type: 'primary' }"
          :oper-type="OperPermissionType.MANAGE"
          style="margin-left: 1rem"
          @click="emits('createFn', serviceInfo)"
          >{{ t("aiot.serviceApply.addWorkOrder") }}</PermissionBtn
        >
        <PermissionBtn
          v-if="serviceInfo.workOrderId"
          :btn-props="{ type: 'primary' }"
          :oper-type="OperPermissionType.MANAGE"
          style="margin-left: 1rem"
          @click="orderDetailVisible = true"
          >服务详情</PermissionBtn
        >
      </div>
    </template>
    <WorkOrderDetails v-model:visible="orderDetailVisible" :works-order-id="serviceInfo.workOrderId" :mask="true" />
  </FullPageModal>
</template>
<script lang="ts" setup>
import { useI18n } from "/@/locales/useI18n";
import ServiceApply from "./ServiceApplyInfo.vue";
import { computed, nextTick, ref, shallowRef, watch } from "vue";
import FullPageModal from "/@/components/FullPageModal.vue";
import { getServiceOrderById, getServiceFlowNodes } from "/@/api/aiot/serviceApply";
import { ServiceFlowNodes, ServiceApplyInfo } from "/@/api/aiot/serviceApply/models";
import { OperPermissionType } from "/@/api/aiot/role/models";
const { t } = useI18n();
const props = withDefaults(
  defineProps<{
    visible: boolean;
    serviceOrderId?: string;
    showBtn?: boolean;
    getContainer?: () => HTMLElement;
  }>(),
  { showBtn: true }
);
const loadingFlag = shallowRef<boolean>(false);
const serviceInfo = ref<ServiceApplyInfo>({});
const workFlowNodes = ref<Array<ServiceFlowNodes>>([]);
const emits = defineEmits(["create", "update:visible", "ok", "cancelFn", "createFn"]);
const innerVisible = ref(false);
const orderDetailVisible = ref(false);
// const currentStep = computed(() => {
//   let indexArr = workFlowNodes.value.map((item, index) => {
//     return item.serviceFlowNodeId ? index : 0;
//   });
//   return Math.max(...indexArr);
// });
const stateColor = computed(() => {
  return {
    WAITING: "rgba(57, 201, 225, 0.1)",
    CANCEL: "rgba(123, 135, 154, 0.1)",
    FINISHED: "rgba(56, 206, 123, 0.1)",
    SERVICE: "rgba(56, 206, 123, 0.1)",
    CREATED: "rgba(56, 206, 123, 0.1)",
  }[serviceInfo.value.serviceState || ""];
});
const iconStr = computed(() => {
  return {
    icon: {
      CANCEL: "icon-yiquxiao",
      WAITING: "icon-dengdai",
      FINISHED: "icon-chenggong",
      SERVICE: "icon-chenggong",
      CREATED: "icon-chenggong",
    }[serviceInfo.value.serviceState || ""],
    color: {
      WAITING: "rgba(57, 201, 225, 1)",
      CANCEL: "rgba(123, 135, 154, 1)",
      FINISHED: "rgba(56, 206, 123, 1)",
      SERVICE: "rgba(56, 206, 123, 1)",
      CREATED: "rgba(56, 206, 123, 1)",
    }[serviceInfo.value.serviceState || ""],
  };
});
// APPLIED:已申请;SCHEDULED:已安排;PROGRESS:进行中;FINISHED:已完工
var stepArr = ref<Array<ServiceFlowNodes>>([]);
watch(
  () => props.visible,
  async (v) => {
    innerVisible.value = v;
    if (v) {
      serviceInfo.value = (await getServiceOrderById({ serviceOrderId: props.serviceOrderId || "" })) || {};
      workFlowNodes.value = (await getServiceFlowNodes({ serviceOrderId: props.serviceOrderId || "" })) || [];
      stepArr.value = workFlowNodes.value.map((item) => {
        return {
          serviceFlowNodeState: item.serviceFlowNodeState,
          serviceFlowNodeStateName: item.serviceFlowNodeStateName,
        };
      });
      loadingFlag.value = false;
    } else {
      loadingFlag.value = true;
      serviceInfo.value = {};
    }
  }
);
function open() {
  nextTick(() => {
    // workOrderIns.value?.initFormItemComponentData();
  });
}
function handleCancelFn() {
  emits("update:visible", false);
}
//第一次打开
let firstShow = true;
watch(innerVisible, (v) => {
  emits("update:visible", v);
  if (firstShow) {
    firstShow = false;
  }
});
//窗口关闭
function cancel() {
  emits("update:visible", false);
}
</script>
<style lang="less">
.state-info {
  background: rgba(57, 201, 225, 0.1);
  border-radius: 4px;
  border: 1px solid #39c9e1;
  p {
    margin: 0;
  }
}
</style>
